<template>
	<view class="td-cube" :style="cssVars">
		<image class="jt jt-01" src="../../static/img/icon-jiexian.png" mode="widthFix"></image>
		<image class="jt jt-02" src="../../static/img/icon-jiexian.png" mode="widthFix"></image>
		<view class="b-cube">
			<ul>
				<li class="front">1</li>
				<li class="back">2</li>
				<li class="top">3</li>
				<li class="bottom">4</li>
				<li class="left">5</li>
				<li class="right">6</li>
			</ul>
		</view>
		<view class="b-cube b-cube2">
			<view class="ratio">{{ratio}}%</view>
			<ul>
				<li class="front">
				</li>
				<li class="back">2</li>
				<li class="top">3</li>
				<li class="bottom">4</li>
				<li class="left">5</li>
				<li class="right">6</li>
			</ul>
		</view>
	</view>
</template>

<script>
	let Timer
	import props from './props.js';
	export default {
		name: "cube-big",
		mixins: [uni.$u.mixin, props],
		data() {
			return {
				cssVars: '--scaleY: 0'
			};
		},
		computed:{
			comData(){
				const { ratio, current } = this
				return {
					 ratio, current
				}
			},
		},
		watch: {
		   comData: {
			  handler:function(n, o) {
				const ctx = this
				if (n.current>0 && n.ratio<100) {
					clearInterval(Timer)
					let ratio = n.ratio
					if (ratio >0 && ratio<=10) {
						ratio = 10
					}
					let r = Math.floor(ratio / 10)
					Timer = setInterval(() => {
						let r10 = r* 10
						if (r10 === 100) {
							r = Math.floor(ratio / 10)
						} else {
							r++
						}
						ctx.cssVars = `--scaleY: ${(r10 / 100)};`
					}, 1000)
				} else {
					clearInterval(Timer)
					Timer = null
				}
			  },
			  immediate: true
			}
		},
		created() {
			const ctx = this
			let ratio = this.ratio
			if (ratio<=0) {
				ratio = 0
			}
			if (ratio>=100) {
				ratio = 100
			}
			this.cssVars = `--scaleY: ${(ratio / 100)};`
		}
	}
</script>

<style lang="scss" scoped>
	$width: 185rpx;
	$height: 160rpx;
	$length: 160rpx;

	.td-cube {
		width: $width;
		height: $height;
		position: relative;
		margin-top: 20px;
		margin-left: 20px;
		padding-bottom: 15px;

		.jt {
			width: 32rpx;
			height: 18rpx;
			position: absolute;
			z-index: 2;
			top: -15rpx;
		}

		.jt-01 {
			left: 25rpx;
		}

		.jt-02 {
			right: 25rpx;
		}

		.b-cube {
			position: absolute;
			left: 0;
			right: 0;
			width: $width;
			height: $height;
			perspective: 1200px;
			perspective-origin: 420% -220%;
		}

		ul {
			position: relative;
			width: 100%;
			height: 100%;
			transform-style: preserve-3d;
			transform: none;
			top: 50%;
			left: 50%;
		}

		li {
			display: flex;
			position: absolute;
			justify-content: center;
			align-items: center;
			width: $width;
			height: $height;
			opacity: .8;
			font-size: 50px;
			color: transparent;
			background-color: rgba(#35b7eb, 0.2);
			// background-color: #c1e8f9;
			// border: 1rpx solid #ace0f7;
			box-shadow: inset 0 0 1px rgba(blue, 0.2);
			box-sizing: content-box;
		}
		
		
		.front {
			transform: translate(-50%, -50%) rotateY(0deg) translateZ($length / 2);
		}
		
		.back {
			transform: translate(-50%, -50%) rotateY(180deg) translateZ($length / 2);
		}
		
		.top {
			height: $length !important;
			transform: translate(-50%, -50%) rotateX(90deg) translateZ($height / 2);
		}
		
		.bottom {
			height: $length !important;
			transform: translate(-50%, -50%) rotateX(-90deg) translateZ($height / 2);
		}
		
		.left {
			width: $length !important;
			height: $height !important;
			transform: translate(-50%, -50%) rotateY(-90deg) translateZ($width / 2);
		}
		
		.right {
			width: $length !important;
			height: $height !important;
			transform: translate(-50%, -50%) rotateY(90deg) translateZ($width / 2);
		}
		
		
		.b-cube2 ul {
			transform: scaleX(1) scaleY(var(--scaleY)) scaleZ(1);
		}
		.b-cube2 ul li{
			border: 0 !important;
		}
		
		.b-cube2 .front {
			background: #35b7eb !important;
		}
		
		.b-cube2 .top {
			background: linear-gradient(45deg, #fff, #32a8e1) !important;
		}
		
		.b-cube2 .right {
			background: #0a84c7 !important;
		}
	}
	.ratio {
		color: #fff !important;
		font-size: 20px;
		position: absolute;
		left: 50%;
		top: 50%;
		transform: translate(-50%, -50%) translateZ($length / 2);
		z-index: 1000;
	}
</style>